<style  scoped>
.icon-delete {
  position: absolute;
  right: 10px;
  top: 10px;
  font-size: 28px;
  color: red;
}
.radio-type {
  position: absolute;
  right: 50px;
  top: 0px;
}
.demo-split {
  height: 650px;
  border: 1px solid #dcdee2;
}
.left-pane .split-pane-left {
  padding: 10px;
  background: #fff;
}
.tdEpi .ivu-table-cell {
  padding-left: 2px !important;
  padding-right: 2px !important;
}
.demo-split-pane {
  padding: 10px;
}
.p-card {
  color: black;
  font-weight: bold;
}
</style>

<template>
  <div class="demo-split">
    <Split v-model="split1">
      <div slot="left" class="demo-split-pane">
        <div v-for="item in ruleData" :key="item.Gid">
          <Card :bordered="false">
            <p slot="title">{{item.RuleName}}</p>
            <a
              v-if="item.IsDefault==0"
              href="#"
              slot="extra"
              @click.prevent="ChengeheckOnWorkRule(item.Gid)"
            >设为默认</a>
            <span v-else href="#" slot="extra">执行中</span>
            <p class="p-card">上班时间</p>
            <br />
            <p>{{item.CheckRecord1}} ~ {{item.CheckRecord4}}</p>
            <br />
          </Card>
          <br />
        </div>
      </div>
      <div slot="right" class="demo-split-pane">
        <Row>
          <Col span="24">
            <DatePicker
              type="month"
              @on-change="SearchCheckOnWorkSta()"
              v-model="month"
              style="width:120px"
            ></DatePicker>
          </Col>
        </Row>
        <Row class="margin-top-10">
          <Table
            border
            :loading="loading"
            :columns="tableTitle"
            :height="tableHeight"
            :data="tableData"
            ref="table"
          ></Table>
        </Row>
      </div>
    </Split>
    <Modal :mask-closable="false"
      footer-hide
      v-model="modelDetail"
      :title="'考勤记录-'+tempEmp.EmployeeName"
      width="1200"
      draggable
    >
      <Table
        border
        :loading="loadingDetail"
        :columns="tableTitleDetail"
        :data="tableDataDetail"
        ref="table"
        height="450"
      ></Table>
    </Modal>
  </div>
</template>
<script>
import dayjs from "dayjs";
import { Message, Modal } from "view-design";
import Refresh from "@/components/refresh";
import { hasOneOf } from "@/libs/tools";
import {
  SearchCheckOnWorkSta,
  SearchCheckOnWork,
  GetCheckOnWorkRule,
  ChengeheckOnWorkRule
} from "@/api/work";
import { getToken, baseUrl } from "@/libs/util";
export default {
  name: "checkonwork",
  data() {
    return {
      modelDetail: false,
      loadingDetail: false,
      tempEmp: {},
      tableTitle: [
        {
          title: "序号",
          type: "index",
          align: "center",
          width: 80
        },
        {
          title: "操作",
          align: "center",
          width: 80,
          render: (h, params) => {
            return h(
              "Button",
              {
                props: {
                  type: "success",
                  size: "small"
                },
                style: {},
                on: {
                  click: () => {
                    let vm = this;
                    var tempEmp = params.row;
                    var sdate = vm.dayjs(vm.month).format("YYYY-MM-DD");
                    var edate = vm
                      .dayjs(vm.month)
                      .add(1, "month")
                      .add(-1, "day")
                      .format("YYYY-MM-DD");

                    this.$router.push({
                      name: "checkonwork_detail",
                      params: {
                        id: tempEmp.Gid,
                        name: tempEmp.EmployeeName,
                        sdate,
                        edate
                      }
                    });
                  }
                }
              },
              "详情"
            );
          }
        },
        {
          title: "姓名",
          key: "EmployeeName",
          align: "center",
          width: 120
        },
        {
          title: "应打卡天数",
          key: "ShoudRecordCount",
          align: "center",
          width: 150
        },
        {
          title: "实际打卡天数",
          key: "RecordCount",
          align: "center",
          width: 150
        },
        {
          title: "迟到次数",
          key: "CheckState1",
          align: "center",
          width: 100
        },
        {
          title: "早退次数",
          key: "CheckState2",
          align: "center",
          width: 120
        },
        {
          title: "缺卡次数",
          key: "CheckState9",
          align: "center",
          width: 120
        },
        {
          title: " "
        }
      ],
      tableData: [],
      tableTitleDetail: [
        {
          title: "序号",
          type: "index",
          align: "center",
          width: 80
        },
        {
          title: "日期",
          align: "center",
          width: 120,
          render: (h, params) => {
            return h(
              "span",
              {
                props: {
                  type: "success",
                  size: "small"
                },
                style: {},
                on: {}
              },
              dayjs(params.row.WorkDate).format("YYYY-MM-DD") +
                "（" +
                params.row.DeWeek +
                "）"
            );
          }
        },
        {
          title: "上班打卡",
          key: "CheckRecord1",
          align: "center",
          width: 120,
          render: (h, params) => {
            return h(
              "span",
              {
                props: {
                  type: "success",
                  size: "small"
                },
                style: {},
                on: {}
              },
              params.row.CheckRecord1
                ? dayjs(params.row.CheckRecord1).format("HH:mm:ss") + ""
                : ""
            );
          }
        },
        {
          title: "打卡地点",
          key: "CheckAddress1",
          align: "center",
          width: 200
        },
        {
          title: "下班打卡",
          key: "CheckRecord2",
          align: "center",
          width: 120,
          render: (h, params) => {
            return h(
              "span",
              {
                props: {
                  type: "success",
                  size: "small"
                },
                style: {},
                on: {}
              },
              params.row.CheckRecord2
                ? dayjs(params.row.CheckRecord2).format("HH:mm:ss")
                : ""
            );
          }
        },
        {
          title: "打卡地点",
          key: "CheckAddress2",
          align: "center",
          width: 200
        },
        {
          title: "上班状态",
          key: "CheckState1",
          align: "center",
          width: 120,
          render: (h, params) => {
            return h(
              "span",
              {
                style: {},
                on: {}
              },
              this.GetCheckState(params.row.CheckState1)
            );
          }
        },
        {
          title: "下班状态",
          key: "CheckState2",
          align: "center",
          width: 120,
          render: (h, params) => {
            return h(
              "span",
              {
                style: {},
                on: {}
              },
              this.GetCheckState(params.row.CheckState2)
            );
          }
        },
        {
          title: " "
        }
      ],
      tableDataDetail: [],
      loading: false,
      split1: 0.18,
      tableHeight: 450,
      loading: false,
      ruleData: [],
      month: dayjs().year() + "年" + (dayjs().month() + 1) + "月"
    };
  },
  computed: {},
  methods: {
    dayjs,
    GetCheckOnWorkRule() {
      let vm = this;
      vm.loading = true;
      GetCheckOnWorkRule().then(res => {
        const data = res.data;
        if (data.Type == 1) {
          vm.ruleData = data.Data;
        } else {
          Message.error(data.Message);
        }
        vm.loading = false;
      });
    },
    ChengeheckOnWorkRule(id) {
      ChengeheckOnWorkRule(id).then(res => {
        const data = res.data;
        if (data.Type == 1) {
          this.GetCheckOnWorkRule();
        } else {
          this.$Modal.error({ title: "提示", content: data.Message });
        }
      });
    },
    SearchCheckOnWorkSta() {
      let vm = this;
      var sdate = vm.dayjs(vm.month).format("YYYY-MM-DD");
      var edate = vm
        .dayjs(vm.month)
        .add(1, "month")
        .add(-1, "day")
        .format("YYYY-MM-DD");
      var reqData = {
        sdate,
        edate
      };
      vm.loading = true;
      SearchCheckOnWorkSta(reqData).then(res => {
        vm.loading = false;
        const data = res.data;
        if (data.Type == 1) {
          vm.tableData = data.Data;
        } else {
          this.$Modal.error({ title: "提示", content: data.Message });
        }
      });
    },
    SearchCheckOnWork() {
      let vm = this;
      vm.modelDetail = true;
      var sdate = vm.dayjs(vm.month).format("YYYY-MM-DD");
      var edate = vm
        .dayjs(vm.month)
        .add(1, "month")
        .add(-1, "day")
        .format("YYYY-MM-DD");
      var reqData = {
        sdate,
        edate,
        empid: vm.tempEmp.Gid
      };
      vm.loadingDetail = true;
      SearchCheckOnWork(reqData).then(res => {
        vm.loadingDetail = false;
        const data = res.data;
        if (data.Type == 1) {
          vm.tableDataDetail = data.Data;
        } else {
          this.$Modal.error({ title: "提示", content: data.Message });
        }
      });
    },
    GetCheckState(state) {
      if (state == 0) {
        return "正常";
      } else if (state == 1) {
        return "迟到";
      } else if (state == 2) {
        return "早退";
      } else if (state == 9) {
        return "缺卡";
      }
    }
  },
  created() {},
  mounted() {
    let vm = this;
    this.tableHeight = window.innerHeight - 260;
    this.GetCheckOnWorkRule();
    this.SearchCheckOnWorkSta();
  }
};
</script>
